<template>
    <div class="page-container"
        :class="{'main-light': !$store.state.isDarkMode, 'main-dark': $store.state.isDarkMode}"
    >
        <back-header title="设置"/>

        <div class="option">
            <bp-cell-group>
                <bp-cell title="账号资料" content=">"/>
                <bp-cell title="安全隐私" content=">"/>
                <bp-cell title="收货信息" content=">"/>
            </bp-cell-group>

            <bp-cell-group>
                <bp-cell title="画面设置" content=">"/>
                <bp-cell title="首页推荐设置" content=">"/>
                <bp-cell title="播放设置" content=">"/>
                <bp-cell title="离线设置" content=">"/>
            </bp-cell-group>

            <bp-cell-group>
                <bp-cell title="推送设置" content=">"/>
                <bp-cell title="消息设置" content=">"/>
                <bp-cell title="下载管理" content=">"/>
                <bp-cell title="清理储存空间" content=">"/>
                <bp-cell title="其他设置" content=">"/>
            </bp-cell-group>

            <bp-cell-group>
                <bp-cell title="定时关闭" content=">"/>
                <bp-cell title="睡眠提醒" content=">"/>
            </bp-cell-group>

            <bp-cell-group>
                <bp-cell title="深色模式">
                    <van-switch style="transform: translate(0, -4px);" 
                        v-model="$store.state.isDarkMode" 
                        size="22px"
                    />
                </bp-cell>
            </bp-cell-group>

            <bp-cell-group>
                <bp-cell title="我的客服" content=">"/>
                <bp-cell title="关于哔哩噼哩" content=">"/>
                <bp-cell title="商务合作" content=">"/>
            </bp-cell-group>

            <bp-cell-group>
                <bp-cell title="用户协议" content=">"/>
                <bp-cell title="隐私政策" content=">"/>
                <bp-cell title="隐私权限设置" content=">"/>
                <bp-cell title="个人信息收集清单" content=">"/>
                <bp-cell title="第三方信息共享清单" content=">"/>
            </bp-cell-group>

            <bp-cell-group>
                <bp-cell title="退出登录" @click="exitLogin()" />
            </bp-cell-group>
        </div>

    </div>
</template>

<script>
import 'vue-router'
import BpCell from './BpCell.vue'
import BpCellGroup from './BpCellGroup.vue'
import BackHeader from './BackHeader.vue'

export default {
    name: 'SetPage',
    props: ['exitLogin'],
    components: { 
        BpCellGroup, 
        BpCell ,
        BackHeader
    },
}
</script>

<style lang="less" scoped>

.option {
    padding-top: 50px;
    height: 100vh;
    overflow-y: scroll;
    box-sizing: border-box;
}
</style>